<template>
  <div class="detail" :style="defaultStyle" :class="isActiveClass">
    <div :style="[contentStyle, heightStyle]">
      <img
        v-for="(item, index) in contentData.default_sub_list"
        :key="index"
        :src="item.fileUrl"
        class="img"
        @load="onImageLoad(index, $event)"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  const props = defineProps({
    contentData: {
      type: Object,
      default() {
        return {}
      }
    },
    isActiveClass: {
      type: String
    }
  })

  const carouselHeight = ref(136)

  const defaultStyle = computed(() => {
    const s = props.contentData.style
    return {
      paddingTop: s.paddingTop,
      paddingLeft: s.paddingLeft,
      paddingRight: s.paddingRight,
      paddingBottom: s.paddingBottom
    }
  })

  const contentStyle = computed(() => {
    const s = props.contentData.style
    return {
      borderRadius: s.borderRadius,
      backgroundColor: s.backgroundColor,
      overflow: 'hidden'
    }
  })

  const heightStyle = computed(() => {
    return {
      height: carouselHeight.value + 'px'
    }
  })

  function onImageLoad(index: number, event: Event) {
    if (index === 0) {
      const img = event.target as HTMLImageElement
      const naturalWidth = img.naturalWidth
      const naturalHeight = img.naturalHeight

      const displayWidth = 375
      const scale = displayWidth / naturalWidth
      const scaledHeight = Math.round(naturalHeight * scale)

      carouselHeight.value = scaledHeight
    }
  }
</script>

<style scoped lang="scss">
  .img {
    width: 100%;
    height: 100%;
    text-align: center;
    object-fit: cover;
  }

  .active-component {
    border: 1px solid var(--el-color-primary);
  }
</style>
